<script setup>
import { getOrderList } from '@/api/order.js'
import { ref } from 'vue'
import { showSuccessToast, showFailToast } from 'vant';

const orderList = ref({})
getOrderList().then(res => {
  orderList.value = res.data.data
  // console.log(res);
  // console.log(orderList.value.orderNum);
})

let unOrder = ()=>{
  console.log('点我了');
  showSuccessToast('取消成功');
}
</script>
<template>
  <div>
    <van-nav-bar title="预约详情" left-arrow @click-left="$router.back()" />
    <div class="box1">
      <span>已预约/预约号码</span>
      <p>{{ orderList.orderNum }}</p>
    </div>
    <!-- 预约展示 -->
    <van-card  :desc="orderList.desc" :title="orderList.name" tag="打折"
      thumb="https://p5.itc.cn/q_70/images01/20210701/5bc3cdf0747f4be5bd1c908914c68075.jpeg">
      <template #tags>
        <van-tag plain type="danger">送餐</van-tag>
        <van-tag plain type="warning">现场</van-tag>
        <van-tag plain type="primary">预约</van-tag>
        <span>{{ orderList.num }}</span>
      </template>
    </van-card>
    <!-- 预约信息盒子 -->
    <div class="box2" >
      <h2>预约信息</h2>
      <p>预约号码：{{ orderList.orderNum }}</p>
      <p>预约人数：{{ orderList.num }}</p>
      <p>预约时间：{{ orderList.orderTime }}</p>
      <van-button size="normal" icon-position="right" @click="unOrder">预约取消</van-button>
    </div>

    <!-- 图片 -->
   <img
        src="https://img1.baidu.com/it/u=3155988012,1977937542&fm=253&app=138&size=w931&n=0&f=JPG&fmt=auto?sec=1686675600&t=0842543c2005c3ccdcadcfa476ba4a01"
        alt="">
  </div>
</template>
  

   
<style lang="scss" scoped>
.box1 {
  width: 375px;
  height: 120px;
  border-style: none;
  border-color: unset;
  font-size: 14px;
  padding: 0px;
  text-align: center;
  line-height: 20px;
  font-weight: normal;
  font-style: normal;
  background: rgb(155, 179, 212);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  p {
    font-family: PingFangSC;
    font-weight: 700;
    font-size: 36px;
    color: rgba(22, 103, 210, 1);
    font-style: normal;
    letter-spacing: 0px;
    line-height: 50px;
    text-decoration: none;
  }

}
.van-card {
  .van-tag {
    line-height: 30px;
  }
}

.box2 {
  width: 375px;
  height: 168px;
  border-color: rgb(187, 187, 187);
  font-size: 14px;
  padding: 10px;
  line-height: 20px;
  color: rgb(153, 153, 153);
  h2{
    font-weight: 400;
    font-size: 14px;
    color: rgb(28, 34, 42);
    line-height: 20px;
    height: 32px;
  }
  p{
    font-size: 12px;
    line-height: 20px;
  }
  .van-button{
    float: right;
    margin-right:20px ;
  }

}

img {
  height: 57px;
  width: 277px;
  border-color: rgb(187, 187, 187);
  border-radius: 8px;
  box-shadow: none;
  margin-left: 30px;
}
</style>